import { defineComponent, reactive, ref, computed } from "vue";
import { PlusSquareOutlined, FormOutlined } from '@ant-design/icons-vue';
import Edit from './modal/Edit'
import UpdateModal from './modal/update'
import { API, requests } from "@/api";

export default defineComponent({
  components: {
    Edit,
    UpdateModal,
  },
  setup() {
    const table = {
      title: '小程序管理',
      scored: reactive({
        id: 2,
      }),
      data: ref([{
        AppletName: "鑫玺云",
        PublicName: "鑫玺云",
        Appid: "wx864683143",
        AppletId: "wx990130",
        Appsecret: "Aventador",
        Remarks: "这是一条测试数据",
      }, {
        AppletName: "1",
        PublicName: "2",
        Appid: "3",
        AppletId: "4",
        Appsecret: "5",
        Remarks: "6",
      },]),
      columns: reactive([
        {
          title: '小程序名称',
          dataIndex: 'AppletName',
          align: "center"
        },

        {
          title: '公众号名称',
          dataIndex: 'PublicName',
          align: "center"
        },
        {
          title: 'Appid',
          dataIndex: 'Appid',
          align: "center"
        },
        {
          title: '小程序ID',
          dataIndex: 'AppletId',
          align: "center"
        },
        {
          title: 'Appsecret',
          dataIndex: 'Appsecret',
          align: "center"
        },
        {
          title: '备注',
          dataIndex: 'Remarks',
          align: "center"

        },
        {
          title: '操作',
          slots: { customRender: 'action' },
          width: '260px',
          align: "center"
        },
      ]),
      slots: {
        table: {
          action: ({ record }: any) => (
            <div class="btns">
              <a-button type="primary" class=" w-24 " v-slots={{
                icon: () => (<FormOutlined style="font-size:20px;" />)
              }} onClick={() => modal.openModal("Edit", "编辑", record)}>编辑</a-button>
              <a-button type="primary" danger class=" w-24 ml-1.5 " v-slots={{
                icon: () => (<FormOutlined style="font-size:20px;" />)
              }}>删除</a-button>
            </div>
          ),
        },
      },

    }
    const form = {
      modal: ref({
        AppletName: "鑫玺云",
        PublicName: "鑫玺云",
        Appid: "wx864683143",
        AppletId: "wx990130",
        Appsecret: "Aventador",
        Remarks: "这是一条测试数据",
      }),
      visible: ref(false),
      showModal: (record: any) => {
        form.visible.value = true;
        form.modal.value = record;
      },
      doRequest: () => {
        requests({
          url: API.user.login,
          data: {
            username: "Aventador",
            password: "990130"
          },
        }).then((res: any) => {
          console.log(res);
        });
      }
    }


    const modal = {
      name: ref("Edit"),
      title: ref(""),
      data: ref<any>({ }),
      show: ref(false),
      onCancel: () => {
        modal.show.value = false;
      },
      openModal: (name: string, title: string, data: {}) => {
        modal.name.value = name;
        modal.title.value = title;
        modal.data.value = data;
        modal.show.value = true;
      },
      onFinish: () => {
        modal.show.value = false;
      },
    };

    const modalForm = computed(() => {
      switch (modal.name.value) {
        case "Edit":
          return (
            <Edit
              data={modal.data.value}
              onFinish={modal.onFinish}
              onClose={() => (modal.show.value = false)}
            />
          );
        default:
          return <h1>配置错误</h1>;
      }
    });

    return () => (
      <div id="SetUp">
        <a-card title="这里是标题" style="width: 96%;margin:auto;margin-top:30px" v-slots={{
          extra: () => (<a-button type="primary" class=" w-24 " v-slots={{
            icon: () => (<PlusSquareOutlined style="font-size:20px;" />)
          }}>添加</a-button>)
        }}>
          <a-table
            columns={table.columns}
            dataSource={table.data.value}
            v-slots={table.slots.table}
            rowKey={() => (table.scored.id)}
            bordered
            pagination={false}
          />
        </a-card>
        {/* <Edit data={form} onFinsh={form.doRequest}></Edit> */}

        <My-Modal
          v-model={[modal.show.value, "show"]}
          title={modal.title.value}
          width={600}
          form={modalForm.value}>
        </My-Modal>
      </div>
    );
  },
});
